<template>
  <div class="photobox">
    <div class="photo">
      <div class="item">
        <img :src="img1" alt />
        <h3>限时秒杀</h3>
      </div>
      <div class="item">
        <img :src="img2" alt />
        <h3>畅销商品</h3>
      </div>
      <div class="item">
        <img :src="img3" alt />
        <h3>品质大牌</h3>
      </div>
      <div class="item">
        <img :src="img4" alt />
        <h3>小u自营</h3>
      </div>
      <div class="item">
        <img :src="img5" alt />
        <h3>积分商城</h3>
      </div>
    </div>
    <div class="spbox">
      <div class="msbox">
        <h3>限时秒杀</h3>
        <span>
          <a href="#">查看更多 &gt;</a>
        </span>
        <p class="a1">每天0点场 好货秒不停</p>
        <p class="a2">
          <span class="a3">05</span>:
          <span>20</span>:
          <span>48</span>
        </p>
      </div>
      <div class="ppbox" :style="{background:`url(${require('../../../assets/images/tu2.png')})   no-repeat`}">
        <h2>品牌上新</h2>
        <p>9点场,抢大牌</p>
        <span>
          <a href="#">疯抢红包 &gt;</a>
        </span>
      </div>
      <div class="ppbox1" :style="{background:`url(${require('../../../assets/images/tu3.png')})   no-repeat`}">
        <h2>日用好物</h2>
        <p>愿君多采撷</p>
        <span>
          <a href="#">塞满奖券 &gt;</a>
        </span>
      </div>
       <!-- 精品课程 -->
    
  </div>



 

  </div>
   
</template>

<script>
import img1 from "../../../assets/images/1.png";
import img2 from "../../../assets/images/2.png";
import img3 from "../../../assets/images/3.png";
import img4 from "../../../assets/images/4.png";
import img5 from "../../../assets/images/5.png";


export default {
  data() {
    return {
      img1,
      img2,
      img3,
      img4,
      img5,
     
    };
  }
};
</script>

<style scoped>
.photobox {
  overflow: hidden;
  padding-top: 60px;
}
.photo {
  width: 100vw;
  display: flex;
  /* float: left; */
}
.photo .item {
  /* width: 40px; */
  height: 80px;
  margin-left: 15px;
}
.photo img {
  width: 40px;
}
.spbox {
  width: 94.6667vw;
  height: 46.6667vw;
  background-color: #f2f2f2;
  padding: 2.6667vw;
  margin-top: 20px;
  /* padding-top: 40px; */
  /* position: relative; */
}

.spbox .msbox {
  float: left;
  width: 46.6667vw;
  height: 46.6667vw;
  /* background: url(../images/card／plate／index／kingkong／big@2x.png) no-repeat; */
  /* margin-left: 2.6667vw; */
}

.msbox h3 {
  display: inline-block;
  font-size: 4vw;
  color: #85a642;
  line-height: 9.3333vw;
  text-indent: 1em;
}

.msbox span a {
  margin-top: 3.6vw;
  margin-right: 3.0667vw;
  display: inline-block;
  font-size: 2.4vw;
  color: #40403f;
}

.msbox .a1 {
  text-indent: 1em;
  font-size: 2.4vw;
  color: #b6ce82;
  /* line-height: 5.3333vw; */
}

.msbox .a2 span {
  display: inline-block;
  margin-top: 1.6vw;
  width: 4.2667vw;
  height: 4.8vw;
  line-height: 4.8vw;
  background-color: #85a642;
  border-radius: 0.1333vw;
  font-size: 1.8667vw;
  color: #ffffff;
  text-align: center;
  /* text-indent: 2em; */
}

.msbox .a2 .a3 {
  margin-left: 2.6667vw;
}

.spbox .ppbox {
  /* display: inline-block; */
  width: 46.6667vw;
  height: 22.6667vw;
  /* background: url(../images/图层\36png) no-repeat; */
  float: right;
  /* position: absolute; */
  /* float: right; */
}

.ppbox h2 {
  font-size: 4vw;
  color: #ff6040;
  line-height: 10vw;
  text-indent: 1em;
}

.ppbox p {
  font-size: 2.4vw;
  color: #ff9580;
  text-indent: 2em;
}

.ppbox span {
  margin: 1.3333vw 0 0 2.6667vw;
  display: inline-block;
  width: 16vw;
  height: 5.3333vw;
  background-color: #ff6040;
  border-radius: 0.1333vw 2.4vw 2.4vw 0.1333vw;
  line-height: 5.3333vw;
  text-align: center;
}

.ppbox span a {
  font-size: 2.4vw;
  color: #fff;
}

.ppbox1 {
  margin-top: 1.3333vw;
  width: 46.6667vw;
  height: 22.6667vw;
  /* background: url(../images/图层\37png) no-repeat; */
  float: right;
}

.ppbox1 h2 {
  font-size: 4vw;
  color: #ff6040;
  line-height: 10vw;
  text-indent: 1em;
}

.ppbox1 p {
  font-size: 2.4vw;
  color: #ff9580;
  text-indent: 2em;
}

.ppbox1 span {
  margin: 1.3333vw 0 0 2.6667vw;
  display: inline-block;
  width: 16vw;
  height: 5.3333vw;
  background-color: #ff6040;
  border-radius: 0.1333vw 2.4vw 2.4vw 0.1333vw;
  line-height: 5.3333vw;
  text-align: center;
}

.ppbox1 span a {
  font-size: 2.4vw;
  color: #fff;
}

</style>